// variables
var canvas, ctx;
var image;
var iMouseX, iMouseY = 1;
var theSelection;
var count = 0;
var formdata = false;
var fileName = "";
// define Selection constructor
function Selection(x, y, w, h) {
	this.x = x; // initial positions
	this.y = y;
	this.w = w; // and size
	this.h = h;

	this.px = x; // extra variables to dragging calculations
	this.py = y;

	this.csize = 6; // resize cubes size
	this.csizeh = 10; // resize cubes size (on hover)

	this.bHow = [ false, false, false, false ]; // hover statuses
	this.iCSize = [ this.csize, this.csize, this.csize, this.csize ]; // resize
																		// cubes
																		// sizes
	this.bDrag = [ false, false, false, false ]; // drag statuses
	this.bDragAll = false; // drag whole selection
}

// define Selection draw method
Selection.prototype.draw = function() {
	ctx.strokeStyle = '#000';
	ctx.lineWidth = 2;
	ctx.strokeRect(this.x, this.y, this.w, this.h);

	// draw part of original image
	if (this.w > 0 && this.h > 0 && this.x > 0 && this.y > 0) {
		ctx.drawImage(image, this.x, this.y, this.w, this.h, this.x, this.y,
				this.w, this.h);
		// console.debug("Line " + count + ": " + this.x +", "+ this.y+", "+
		// this.w+", "+ this.h+", "+ this.x+", "+ this.y+", "+ this.w+", "+
		// this.h)
		//count = count + 1;
	}

	// draw resize cubes
	ctx.fillStyle = '#fff';
	ctx.fillRect(this.x - this.iCSize[0], this.y - this.iCSize[0],
			this.iCSize[0] * 2, this.iCSize[0] * 2);
	ctx.fillRect(this.x + this.w - this.iCSize[1], this.y - this.iCSize[1],
			this.iCSize[1] * 2, this.iCSize[1] * 2);
	ctx.fillRect(this.x + this.w - this.iCSize[2], this.y + this.h
			- this.iCSize[2], this.iCSize[2] * 2, this.iCSize[2] * 2);
	ctx.fillRect(this.x - this.iCSize[3], this.y + this.h - this.iCSize[3],
			this.iCSize[3] * 2, this.iCSize[3] * 2);
}

function drawScene() { // main drawScene function
	ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); // clear canvas

	// draw source image
	ctx.drawImage(image, 0, 0, ctx.canvas.width, ctx.canvas.height);

	// and make it darker
	ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
	ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);

	// draw selection
	theSelection.draw();
}

$(function() {
	// loading source image
	image = new Image();
	image.onload = function() {
	}
	image.src = 'images/image.jpg';

	// creating canvas and context objects
	canvas = document.getElementById('panel');
	ctx = canvas.getContext('2d');

	// create initial selection
	theSelection = new Selection(200, 200, 200, 200);
	
	$('#panel').mousemove(
			function(e) { // binding mouse move event
				var canvasOffset = $(canvas).offset();
				iMouseX = Math.floor(e.pageX - canvasOffset.left);
				iMouseY = Math.floor(e.pageY - canvasOffset.top);

				// in case of drag of whole selector
				if (theSelection.bDragAll) {
					theSelection.x = iMouseX - theSelection.px;
					theSelection.y = iMouseY - theSelection.py;
				}

				for (i = 0; i < 4; i++) {
					theSelection.bHow[i] = false;
					theSelection.iCSize[i] = theSelection.csize;
				}

				// hovering over resize cubes
				if (iMouseX > theSelection.x - theSelection.csizeh
						&& iMouseX < theSelection.x + theSelection.csizeh
						&& iMouseY > theSelection.y - theSelection.csizeh
						&& iMouseY < theSelection.y + theSelection.csizeh) {

					theSelection.bHow[0] = true;
					theSelection.iCSize[0] = theSelection.csizeh;
				}
				if (iMouseX > theSelection.x + theSelection.w
						- theSelection.csizeh
						&& iMouseX < theSelection.x + theSelection.w
								+ theSelection.csizeh
						&& iMouseY > theSelection.y - theSelection.csizeh
						&& iMouseY < theSelection.y + theSelection.csizeh) {

					theSelection.bHow[1] = true;
					theSelection.iCSize[1] = theSelection.csizeh;
				}
				if (iMouseX > theSelection.x + theSelection.w
						- theSelection.csizeh
						&& iMouseX < theSelection.x + theSelection.w
								+ theSelection.csizeh
						&& iMouseY > theSelection.y + theSelection.h
								- theSelection.csizeh
						&& iMouseY < theSelection.y + theSelection.h
								+ theSelection.csizeh) {

					theSelection.bHow[2] = true;
					theSelection.iCSize[2] = theSelection.csizeh;
				}
				if (iMouseX > theSelection.x - theSelection.csizeh
						&& iMouseX < theSelection.x + theSelection.csizeh
						&& iMouseY > theSelection.y + theSelection.h
								- theSelection.csizeh
						&& iMouseY < theSelection.y + theSelection.h
								+ theSelection.csizeh) {

					theSelection.bHow[3] = true;
					theSelection.iCSize[3] = theSelection.csizeh;
				}

				// in case of dragging of resize cubes
				var iFW, iFH;
				if (theSelection.bDrag[0]) {
					var iFX = iMouseX - theSelection.px;
					var iFY = iMouseY - theSelection.py;
					iFW = theSelection.w + theSelection.x - iFX;
					iFH = theSelection.h + theSelection.y - iFY;
				}
				if (theSelection.bDrag[1]) {
					var iFX = theSelection.x;
					var iFY = iMouseY - theSelection.py;
					iFW = iMouseX - theSelection.px - iFX;
					iFH = theSelection.h + theSelection.y - iFY;
				}
				if (theSelection.bDrag[2]) {
					var iFX = theSelection.x;
					var iFY = theSelection.y;
					iFW = iMouseX - theSelection.px - iFX;
					iFH = iMouseY - theSelection.py - iFY;
				}
				if (theSelection.bDrag[3]) {
					var iFX = iMouseX - theSelection.px;
					var iFY = theSelection.y;
					iFW = theSelection.w + theSelection.x - iFX;
					iFH = iMouseY - theSelection.py - iFY;
				}

				if (iFW > theSelection.csizeh * 2
						&& iFH > theSelection.csizeh * 2) {
					theSelection.w = iFW;
					theSelection.h = iFH;

					theSelection.x = iFX;
					theSelection.y = iFY;
				}
				// console.debug("Mouse move");
				drawScene();
			});

	$('#panel')
			.mousedown(
					function(e) { // binding mousedown event
						var canvasOffset = $(canvas).offset();
						iMouseX = Math.floor(e.pageX - canvasOffset.left);
						iMouseY = Math.floor(e.pageY - canvasOffset.top);

						theSelection.px = iMouseX - theSelection.x;
						theSelection.py = iMouseY - theSelection.y;

						if (theSelection.bHow[0]) {
							theSelection.px = iMouseX - theSelection.x;
							theSelection.py = iMouseY - theSelection.y;
						}
						if (theSelection.bHow[1]) {
							theSelection.px = iMouseX - theSelection.x
									- theSelection.w;
							theSelection.py = iMouseY - theSelection.y;
						}
						if (theSelection.bHow[2]) {
							theSelection.px = iMouseX - theSelection.x
									- theSelection.w;
							theSelection.py = iMouseY - theSelection.y
									- theSelection.h;
						}
						if (theSelection.bHow[3]) {
							theSelection.px = iMouseX - theSelection.x;
							theSelection.py = iMouseY - theSelection.y
									- theSelection.h;
						}

						if (iMouseX > theSelection.x + theSelection.csizeh
								&& iMouseX < theSelection.x + theSelection.w
										- theSelection.csizeh
								&& iMouseY > theSelection.y
										+ theSelection.csizeh
								&& iMouseY < theSelection.y + theSelection.h
										- theSelection.csizeh) {

							theSelection.bDragAll = true;
						}

						for (i = 0; i < 4; i++) {
							if (theSelection.bHow[i]) {
								theSelection.bDrag[i] = true;
							}
						}
						console.debug("Mouse down");
					});

	$('#panel').mouseup(function(e) { // binding mouseup event
		theSelection.bDragAll = false;

		for (i = 0; i < 4; i++) {
			theSelection.bDrag[i] = false;
		}
		theSelection.px = 0;
		theSelection.py = 0;
		console.debug("Mouse up");

	});
		
	if (window.FormData) {
		formdata = new FormData();
	}
	$("#file")
			.change(
					function() {
						var i = 0;
						var len = this.files.length;
						var file;
						var reader;
						
						for (; i < len; i++) {
							file = this.files[i];
							if (!!file.type.match(/image.*/)) {	
								document.getElementById("response").innerHTML = "<h2>Chua upload </h2>"
								$("#viewImage").show();
								// View image len list
								if (window.FileReader) {
									reader = new FileReader();
									reader.onloadend = function(e) {
										showUploadedItem(e.target.result,
												file.fileName);
									};
									reader.readAsDataURL(file);
								}

								// View image len Canvas
								image = new Image();
								image.onload = function() {									
									ctx.drawImage(image, 0, 0);
								};
								image.src = window.URL.createObjectURL(file);
								
								var result = document
										.getElementById("crop_result");

								console.debug("Image:" + image.width + " - "
										+ image.height);
								console.debug("canvas:" + canvas.width + " - "
										+ canvas.height);
								// canvas.width = image.width;
								// canvas.height= image.height;
								drawScene();
								
								//Save form
//								if (formdata) {
//									formdata.append("images[]", c.mozGetAsFile(file.name));
//								}
								console.debug(file.name);
								fileName = file.name;
							}
						}
					});
	drawScene();
});

function showUploadedItem(source) {
//	var list = document.getElementById("image-list"), li = document
//			.createElement("li"), img = document.createElement("img");	
//	img.src = source;
//	li.appendChild(img);
//	list.appendChild(li);
//	console.debug("Image1:" + img.width + " - " + img.height);
//	
//	var test = document.getElementById("test");
//	test.src = source;	
	
	var span = document.getElementById("viewImage"); 	
	var img = document.createElement("img");
	img.src = source;						                         
    img.onload = function(){
       console.debug("Debug: "+ img.offsetWidth +" "+ img.offsetHeight);
       canvas.width = img.offsetWidth;
       canvas.height = img.offsetHeight;
       
       theSelection.w = img.offsetWidth-20;
	   theSelection.h = img.offsetHeight-20;

	   theSelection.x = 10;
	   theSelection.y = 10;
	   console.debug(theSelection.w + " "+theSelection.h + " "+ theSelection.x + " "+theSelection.y)
		
       drawScene();
     $("#viewImage").hide();
    }
	span.appendChild(img);   
}

function getResults() {
	var temp_ctx, temp_canvas;
	temp_canvas = document.createElement('canvas');
	temp_ctx = temp_canvas.getContext('2d');
	temp_canvas.width = theSelection.w;
	temp_canvas.height = theSelection.h;
	temp_ctx.drawImage(image, theSelection.x, theSelection.y, theSelection.w,
			theSelection.h, 0, 0, theSelection.w, theSelection.h);
	var vData = temp_canvas.toDataURL();
	$('#crop_result').attr('src', vData);
}

function savedFile() {
	if(fileName == ""){
		alert("Chua co file duoc chon");
		return;
	}
	console.debug('savedFile: '+fileName);
	
	var temp_ctx, temp_canvas;
	temp_canvas = document.createElement('canvas');
	temp_ctx = temp_canvas.getContext('2d');
	temp_canvas.width = theSelection.w;
	temp_canvas.height = theSelection.h;
	temp_ctx.drawImage(image, theSelection.x, theSelection.y, theSelection.w,
			theSelection.h, 0, 0, theSelection.w, theSelection.h);
	
	formdata = new FormData();
	formdata.append("images[]", temp_canvas.mozGetAsFile(fileName));
	//------------------
	$.ajax({
		//url : "upload.php",
		url : "cgi-bin/test.cgi",
		type : "POST",
		data : formdata,
		processData : false,
		contentType : false,
		success : function(res) {
			document.getElementById("response").innerHTML = res;
		}
	});
}